<!-- HTML5文档头 -->
<!DOCTYPE html>
<!-- lang="zh-cn"，此网页基本是中文内容 -->
<html lang="zh-cn">

	<head>
		<meta charset="utf-8" />
		<meta name="description" content="对网页的一段概括性描述" />
		<meta name="keywords" content="关键字1,关键字2,关键字3..." />
		<!-- 在双核浏览器下，默认使用webkit内核，由360浏览器提出 -->
		<meta name="renderer" content="webkit">
		<title></title>
		<link rel="shortcut icon" href="" />
		<!-- 强大的CSS Reset库 -->
		<!--<link href="http://cdn.bootcss.com/normalize/5.0.0/normalize.css" rel="stylesheet">-->
		<!-- 让IE9以下的浏览器支持HTML5标签 -->
		<!--[if lt IE 9]><script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script><![endif]-->
		<link rel="stylesheet" href="font/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/active.css" />
	</head>

	<body>
		<!--注册-->
		<section class="jw-zhuce" id="zhuce">
			<div class="jw-zhuce-content" id="zhuC">
				<a class="close">
					<i class="fa fa-times" id="close"></i>
				</a>
				<div class="jw-zhuce-content-form">
					<div id="register-active" class="switch">
						<i class="fa fa-toggle-on"></i> 切换登陆
					</div>
					<h3>注册<p class="status"></p></h3>
					<p>
						<label class="icon" for="user_name"><i class="fa fa-user"></i></label>
						<input class="input-control" id="user_name" type="text" name="user_name" placeholder="输入英文用户名" required="" aria-required="true">
					</p>
					<p>
						<label class="icon" for="user_email"><i class="fa fa-envelope"></i></label>
						<input class="input-control" id="user_email" type="text" name="user_email" placeholder="输入常用邮箱" required="" aria-required="true">
					</p>
					<p>
						<label class="icon" for="user_pass"><i class="fa fa-lock"></i></label>
						<input class="input-control" id="user_pass" type="password" name="user_pass" placeholder="密码最小长度为6" required="" aria-required="true">
					</p>
					<p>
						<label class="icon" for="user_pass2"><i class="fa fa-retweet"></i></label>
						<input class="input-control" type="password" id="user_pass2" name="user_pass2" placeholder="再次输入密码" required="" aria-required="true">
					</p>
					<p class="safe">
						<label class="remembermetext" for="rememberme">
							<input name="rememberme" type="checkbox" checked="checked" id="rememberme" >记住我的登录
						</label>
						<a class="lost" href="#">忘记密码？</a>
					</p>
					<p>
						<input class="submit" type="reset" value="注册" name="submit">
					</p>
				</div>
				<div class="other-sign">
					<p>您也可以使用第三方帐号登录</p>
					<div class="qqlogin">
						<a rel="nofollow" href="#">
							<i class="fa fa-qq"></i> QQ帐号登录
						</a>
					</div>
				</div>
			</div>
		</section>
		<!--登陆-->
		<section class="jw-denglu" id="denglu">
			<div class="jw-denglu-content" id="dengC">
				<a class="close">
					<i class="fa fa-times" id="clos"></i>
				</a>
				<div class="jw-denglu-content-form">
					<div id="active" class="switch">
						<i class="fa fa-toggle-on"></i> 切换注册
					</div>
					<h3>登录<p class="status"></p></h3>
					<p>
						<label class="icon" for="username"><i class="fa fa-user"></i></label>
						<input class="input-control" id="username" type="text" placeholder="请输入用户名或邮箱" name="username" required="" aria-required="true">
					</p>
					<p>
						<label class="icon" for="password"><i class="fa fa-lock"></i></label>
						<input class="input-control" id="password" type="password" placeholder="请输入密码" name="password" required="" aria-required="true">
					</p>
					<p class="safe">
						<label class="remembermetext" for="rememberme">
							<input name="rememberme" type="checkbox" checked="checked" id="rememberme" >记住我的登录
						</label>
						<a class="lost" href="#">忘记密码？</a>
					</p>
					<p>
						<input class="submit" type="submit" value="登录" name="submit">
					</p>
				</div>
				<div class="other-sign">
					<p>您也可以使用第三方帐号登录</p>
					<div class="qqlogin">
						<a rel="nofollow" href="#">
							<i class="fa fa-qq"></i> QQ帐号登录
						</a>
					</div>
				</div>
			</div>
		</section>
		<!--指定-->
		<aside class="jw-aside-top" id="scroll">
			^
		</aside>
		<!--导航-->
		<header class="jw-header" id="topbar">
			<div class="jw-comWidth1">
				<div class="jw-header-logo fl">
					<a href="index.html"><img src="img/logo.png" height="50px" /></a>
				</div>
				<ul class="jw-header-nav fl">
					<li class="fl">
						<a href="passage.html">文章</a>
					</li>
					<li class="fl">
						<a href="enjoy.html">欣赏</a>
					</li>
					<li class="fl">
						<a href="source.html">素材</a>
					</li>
					<li class="fl">
						<a href="change.html">兑换</a>
					</li>
					<li class="fl">
						<a href="active.html" style="color: rgba(255, 255, 255, 0.5);">活动</a>
					</li>
					<li class="fl">
						<a href="Fantastic.html">唯然</a>
					</li>
					<li class="fl" id="show">
						<a href="add.html">更多</a>
						<ul class="sub-menu" id="cloo">
							<li>
								<a href="add.html">关于觉唯</a>
							</li>
							<li>
								<a href="adda.html">留言联系</a>
							</li>
						</ul>
					</li>
				</ul>
				<script type="text/javascript">
					var show = document.getElementById('show');
					var cloo = document.getElementById('cloo');

					show.onmouseover = function() {
						cloo.style.display = 'block';
					}
					show.onmouseout = function() {
						cloo.style.display = 'none';
					}

					cloo.onmouseover = function() {
						cloo.style.display = 'block';
					}
					cloo.onmouseout = function() {
						cloo.style.display = 'none';
					}
				</script>
				<div class="jw-header-reg fr">
					<a href="#" id="deng">登录</a>
					<a href="#" id="zhu">注册</a>
				</div>
				<div class="jw-header-search fr">
					<input type="text" />
					<span class="search-icon">
    					<i class="fa fa-search"></i>
    				</span>
				</div>
			</div>
			<ul class="jw-header-phone">
				<ul class="jw-header-phone-menu-nav">
					<li>
						<a href="#">首页</a>
					</li>
					<li>
						<a href="#">文章</a>
					</li>
					<li>
						<a href="#">欣赏</a>
					</li>
					<li>
						<a href="#">素材</a>
					</li>
					<li>
						<a href="#">兑换</a>
					</li>
					<li>
						<a href="#">活动</a>
					</li>
					<li>
						<a href="#">唯然</a>
					</li>
					<li>
						<a href="#">更多</a>
					</li>
				</ul>
				<li>
					<a href="#" class="jw-header-phone-menu">
						<i class="fa fa-bars"></i>
					</a>

				</li>
				<li>
					<a href="#" class="jw-header-phone-logo">
						<img src="img/logo-phone.png" height="50px" />
					</a>
				</li>
				<li>
					<a href="#" class="jw-header-phone-user">
						<i class="fa fa-user"></i>
					</a>
				</li>
			</ul>
		</header>
		<!--bannner-->
		<div class="jw-banner">
			<div class="jw-banner-inner">
				<h1>活动 · 专题</h1>
				<p>Activities and topics</p>
			</div>
		</div>

		<div class="jw-container">
			<div id="guide" class="navcaret">
				<div class="group">
					<ul>
						<li class="current-cat" id="dian">
							<a href="#">全部</a>
						</li>
						<li class="cat-item cat-item-88" id="ji">
							<a href="#">赛事</a>
						</li>
					</ul>
				</div>
			</div>
			<div id="primary" class="primary special" role="main">
				<div class="article" role="main">
					<ul>
						<li id="post-11280" class="group">
							<div class="item">
								<div class="thumb">
									<a target="_blank" href="#">
										<img width="530" height="250" src="img/123.png" />										
									</a>
									<a class="read-more" href="#">
										<div class="icon">
											<i class="fa fa-share"></i>
										</div>
									</a>
									<div class="activity activity-end"></div>
								</div>
								<div class="title">
								<h2>
         						<a target="_blank" href="#" rel="bookmark" title="让H5再次唤醒你的设计天赋 – 2015 MAKA H5 创意模板大赛">
          							让H5再次唤醒你的设计天赋 – 2015 MAKA H5 创意模板大赛         </a>
         						<time class="time">
              						2015-08-10          
         						</time>
      							 </h2>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<footer class="jw-footer clearfix">
			<div class="jw-comWidth clearfix">
				<aside class="group describe">
					<h3>觉唯</h3>
					<p>以用户为中心的设计理念，专注于用户体验设计，拥有国内外最新的设计潮流趋势、独特而美的创意视觉、新颖而灵敏的思维意识、极致而生动的交互体验，更有严谨而通俗的技术教程！ 唯然是觉唯网的图片分享社区，以记录美丽、分享美好的创意理念，分享高品质创意、艺术、设计、时尚、插画、摄影、唯美类精美图片。
					</p>
				</aside>
				<aside class="group">
					<dl>
						<dt>关于</dt>
						<dd>
							<a href="#">关于觉唯</a>
							<a href="#">留言联系</a>
							<a href="#">友情链接</a>
							<a href="#">免责声明</a>
							<a href="#">网站地图</a>
						</dd>
					</dl>
				</aside>
				<aside class="group">
					<dl>
						<dt>关于</dt>
						<dd>
							<a href="#">关于觉唯</a>
							<a href="#">留言联系</a>
							<a href="#">友情链接</a>
							<a href="#">免责声明</a>
							<a href="#">网站地图</a>
						</dd>
					</dl>
				</aside>
				<aside class="group">
					<dl>
						<dt>关于</dt>
						<dd>
							<a href="#">关于觉唯</a>
							<a href="#">留言联系</a>
							<a href="#">友情链接</a>
							<a href="#">免责声明</a>
							<a href="#">网站地图</a>
						</dd>
					</dl>
				</aside>
				<aside class="group social">
					<h3>关注</h3>
					<ul>
						<li>Email:
							<a href="#">javin@jiawin.com</a>
						</li>
						<li>
							<input type="text" placeholder="请输入邮箱地址" />
							<button>订阅</button>
						</li>
						<li class="social-icon clearfix">
							<a href="#">
								<i class="fa fa-weibo"></i>
							</a>
							<a href="#">
								<i class="fa fa-tencent-weibo"></i>
							</a>
							<a href="#">
								<i class="fa fa-qq"></i>
							</a>
							<a href="#">
								<i class="fa fa-rss"></i>
							</a>
							<a href="#">
								<i class="fa fa-weixin"></i>
							</a>
						</li>
					</ul>
				</aside>
				<p class="copyRight clearfix">Copyright © 2012-2016
					<a href="#">觉唯设计</a> Theme by
					<a href="#">Javin zhong</a> All All Rights Reserved. 粤ICP备12073831号-1</p>
			</div>
		</footer>
		<!--导航-->
		<script type="text/javascript">
			var nav = document.getElementsByClassName('jw-header-phone-menu-nav')[0];
			var a = document.getElementsByClassName('jw-header-phone-menu')[0].onclick = function() {
				if (nav.style.display == 'block') {
					nav.style.display = 'none';
				} else {
					nav.style.display = 'block';
				}

			}
		</script>
		<script type="text/javascript">
			var topbar = document.getElementById('topbar');
			window.onscroll = function() {
				var scoll = document.body.scrollTop || document.documentElement.scrollTop;
				if (scoll >= 200) {
					topbar.style.background = '#323232';
				} else {
					topbar.style.background = 'rgba(0, 0, 0, 0.5)';
				}
			}
		</script>
		<script type="text/javascript">
			var dian = document.getElementById("dian");
			dian.onclick = function() {
				document.getElementById("primary").style.display = 'block';
			}
			var ji = document.getElementById("ji");
			ji.onclick = function() {
				document.getElementById("primary").style.display = 'block';
			}
		</script>
		<!--置顶-->
		<script type="text/javascript">
			var obj = document.getElementById("scroll");
			var scrollTop = null;
			obj.onclick = function() {
				var timer = setInterval(function() {
					var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
					window.scrollBy(0, -100);
					if (scrollTop == 0) {
						clearInterval(timer);
					}
				}, 20);
			}
		</script>
		<!--注册-->
		<script type="text/javascript">
			var close = document.getElementById("close");
			close.onclick = function() {
				document.getElementById("zhuce").style.display = 'none';
			}
			var zhu = document.getElementById("zhu");
			zhu.onclick = function() {
				document.getElementById("zhuce").style.display = 'block';
			}
		</script>
		<!--登录-->
		<script type="text/javascript">
			var clos = document.getElementById("clos");
			clos.onclick = function() {
				document.getElementById("denglu").style.display = 'none';
			}
			var deng = document.getElementById("deng");
			deng.onclick = function() {
				document.getElementById("denglu").style.display = 'block';
			}
		</script>
		<!--切换登录-->
		<script type="text/javascript">
			var registerActive = document.getElementById("register-active");
			registerActive.onclick = function() {
				document.getElementById("denglu").style.display = 'block';
				document.getElementById("zhuce").style.display = 'none';
			}
		</script>
		<!--切换注册-->
		<script type="text/javascript">
			var active = document.getElementById("active");
			active.onclick = function() {
				document.getElementById("zhuce").style.display = 'block';
				document.getElementById("denglu").style.display = 'none';
			}
		</script>
	</body>

</html>